<template>
  <div class="box" id="box">
    <!-- 1.头部导航条 -->
    <van-sticky>
      <van-nav-bar
        title="潮流风尚"
        left-arrow
        @click-left="onClickLeft"
      >
      </van-nav-bar>
    </van-sticky>
    <!-- 2.点击选项卡 -->
    <div class="box_header">
      <div v-for="(item, index) of list" :key="index" @click="select(item)">
        <p>{{ item }}</p>
        <span :class="active === item ? 'header_select' : ''"></span>
      </div>
    </div>
    <!-- 3.选项卡详情 -->
    <ul class="fashion_card">
      <li v-for="(item, index) of fashiontype" :key="index" @click="getFashionDetail(item.tideway_id)">
        <img :src="item.tideway_pic" alt=""/>
        <div class="fashion_detail">
           <p>{{item.tideway_title}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import Vue from 'vue'
// import fashion from '../../../public/fashion.json'
import { tidewayList } from '@/api'
import { NavBar, Sticky, Icon } from 'vant'
Vue.use(NavBar)
Vue.use(Sticky)
Vue.use(Icon)
export default {
  data () {
    return {
      list: ['日本', '韩国', '欧美'],
      active: '日本',
      title: '', // 潮流风尚类别标题
      fashiontype: [], // 时尚详情分类
      fashion: [] // 时尚详情分类
    }
  },
  mounted () {
    tidewayList().then(res => {
      this.fashion = res.data.data
      // 遍历数据集合，判断tideway_type与点击类型相同的数据为真显示
      this.fashion.map(item => {
        if (item.tideway_type === this.active) {
          this.fashiontype.push(item)
        }
      })
    })
    document.getElementById('box').addEventListener('scroll', this.handleScroll, false)
  },
  methods: {
    // 跳转潮流详情详情事件
    getFashionDetail (tidewayid) {
      this.$router.push({ path: '/fashionDetail/' + 'tideway_id=' + tidewayid })
    },
    // 滚动事件：滚动距离大于0出现类型标题，等于0消失
    handleScroll () {
      const scrollTop = document.getElementById('box').scrollTop
      if (scrollTop > 0) {
        this.title = this.active
      } else {
        this.title = ' '
      }
    },
    onClickLeft () {
      this.$router.go(-1)
    },
    select (type) {
      this.fashiontype = []
      this.active = type
      // 遍历数据集合，判断tideway_type与点击类型相同的数据为真显示
      this.fashion.map(item => {
        if (item.tideway_type === this.active) {
          this.fashiontype.push(item)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .van-icon-arrow-left {
  font-size: 0.22rem;
  color: #464646;
}
/deep/ .van-nav-bar__title {
  font-size: 0.18rem;
  color: #464646;
  font-weight: bold;
}
/deep/ .van-hairline--bottom::after {
  border:none;
}
/deep/.van-nav-bar {
  line-height: .46rem;
  height: .46rem;
}
.box_header {
  height: 0.45rem;
  width: 100%;
  padding: 0 .45rem;
  line-height: 0.45rem;
  display: flex;
  justify-content: space-between;
  color: #464646;
  background-color: transparent;
  div {
    position: relative;
    p {
      padding: 0 0.03rem;
      text-align: center;
      font-size: 0.16rem;
      color: #464646;
    }
    .header_select {
      display: block;
      width: 100%;
      height: 0.1rem;
      background: #ffe7e8;
      border-radius: 0.03rem;
      position: absolute;
      bottom: 0.14rem;
      z-index: -1;
    }
  }
}
.fashion_card {
  li {
    position: relative;
    width:100%;
    border-bottom: .01rem solid #f9f9f9;
    img {
      width: 1.2rem;
      height: 1rem;
      margin:.16rem 0 .16rem .2rem;
    }
    .fashion_detail {
      position: absolute;
      left:1.605rem;
      top:.43rem;
      right:.195rem;
      p {
        color: #464646;
        font-size: .14rem;
        line-height: .18rem;
      }
    }
  }
}
/deep/ .van-icon-arrow-left {
  font-size: 0.22rem;
  color: #171717;
}
/deep/ .van-nav-bar__title {
  font-size: 0.18rem;
  font-weight: bold;
  color: #171717;
}
</style>
